<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"">
    <style>
        .tagBall{
            width: 800px;
            height: 800px;
            margin:50px auto;
            position: relative;
        }
        .tag{
            display: block;
            position: absolute;
            left: 0px;
            top: 0px;
            color: #000;
            text-decoration: none;
            font-size: 15px;
            font-family: "微软雅黑";
            font-weight: bold;
        }
        .tag:hover{border:1px solid #666;}
    </style>
    <title>3D标签</title>
</head>
<body>
    <div class="tagBall">
        <a class="tag" target="_blank" href="https://www.baidu.com/">aaaa</a>
        <a class="tag" target="_blank" href="https://www.baidu.com/">bbbb</a>
        <a class="tag" target="_blank" href="https://www.baidu.com/">aaaa</a>
        <a class="tag" target="_blank" href="https://www.baidu.com/">bbbb</a>
        <a class="tag" target="_blank" href="https://www.baidu.com/">aaaa</a>
        <a class="tag" target="_blank" href="https://www.baidu.com/">bbbb</a>
        <a class="tag" target="_blank" href="https://www.baidu.com/">aaaa</a>
        <a class="tag" target="_blank" href="https://www.baidu.com/">bbbb</a>
        <a class="tag" target="_blank" href="https://www.baidu.com/">aaaa</a>
        <a class="tag" target="_blank" href="https://www.baidu.com/">bbbb</a>
        <a class="tag" target="_blank" href="https://www.baidu.com/">aaaa</a>
        <a class="tag" target="_blank" href="https://www.baidu.com/">bbbb</a>
        <a class="tag" target="_blank" href="https://www.baidu.com/">aaaa</a>
        <a class="tag" target="_blank" href="https://www.baidu.com/">bbbb</a>
        <a class="tag" target="_blank" href="https://www.baidu.com/">aaaa</a>
        <a class="tag" target="_blank" href="https://www.baidu.com/">bbbb</a>
        <a class="tag" target="_blank" href="https://www.baidu.com/">aaaa</a>
        <a class="tag" target="_blank" href="https://www.baidu.com/">bbbb</a>
        <a class="tag" target="_blank" href="https://www.baidu.com/">aaaa</a>
        <a class="tag" target="_blank" href="https://www.baidu.com/">bbbb</a>
        <a class="tag" target="_blank" href="https://www.baidu.com/">aaaa</a>
        <a class="tag" target="_blank" href="https://www.baidu.com/">bbbb</a>
        <a class="tag" target="_blank" href="https://www.baidu.com/">aaaa</a>
        <a class="tag" target="_blank" href="https://www.baidu.com/">bbbb</a>
        <a class="tag" target="_blank" href="https://www.baidu.com/">bbbb</a>
        <a class="tag" target="_blank" href="https://www.baidu.com/">aaaa</a>
        <a class="tag" target="_blank" href="https://www.baidu.com/">bbbb</a>
        <a class="tag" target="_blank" href="https://www.baidu.com/">aaaa</a>
        <a class="tag" target="_blank" href="https://www.baidu.com/">bbbb</a>
        <a class="tag" target="_blank" href="https://www.baidu.com/">aaaa</a>
        <a class="tag" target="_blank" href="https://www.baidu.com/">bbbb</a>
        <a class="tag" target="_blank" href="https://www.baidu.com/">bbbb</a>
        <a class="tag" target="_blank" href="https://www.baidu.com/">aaaa</a>
        <a class="tag" target="_blank" href="https://www.baidu.com/">bbbb</a>
        <a class="tag" target="_blank" href="https://www.baidu.com/">aaaa</a>
        <a class="tag" target="_blank" href="https://www.baidu.com/">bbbb</a>
        <a class="tag" target="_blank" href="https://www.baidu.com/">bbbb</a>
        <a class="tag" target="_blank" href="https://www.baidu.com/">aaaa</a>
        <a class="tag" target="_blank" href="https://www.baidu.com/">bbbb</a>
        <a class="tag" target="_blank" href="https://www.baidu.com/">aaaa</a>
        <a class="tag" target="_blank" href="https://www.baidu.com/">bbbb</a>
        <a class="tag" target="_blank" href="https://www.baidu.com/">aaaa</a>
        <a class="tag" target="_blank" href="https://www.baidu.com/">bbbb</a>
        <a class="tag" target="_blank" href="https://www.baidu.com/">bbbb</a>
        <a class="tag" target="_blank" href="https://www.baidu.com/">aaaa</a>
        <a class="tag" target="_blank" href="https://www.baidu.com/">bbbb</a>
    </div>
    <script>
        var tagEle = document.querySelectorAll(".tag"),
            paper = document.querySelector(".tagBall");
            RADIUS = 300,
            speed = 20,
            fallLength = 500,
            tags=[],
            angleX = Math.PI/500,
            angleY = Math.PI/500,
            CX = paper.offsetWidth/2,
            CY = paper.offsetHeight/2,
            EX = paper.offsetLeft + document.body.scrollLeft + document.documentElement.scrollLeft,
            EY = paper.offsetTop + document.body.scrollTop + document.documentElement.scrollTop;

        function init(){
            for(var i=0;i<tagEle.length;i++){
                var a , b;
                var k = (2*(i+1)-1)/tagEle.length - 1;
                var a = Math.acos(k);
                var b = a*Math.sqrt(tagEle.length*Math.PI);
                // var a = Math.random()*2*Math.PI;
                // var b = Math.random()*2*Math.PI;
                var x = RADIUS * Math.sin(a) * Math.cos(b);
                var y = RADIUS * Math.sin(a) * Math.sin(b); 
                var z = RADIUS * Math.cos(a);
                var t = new tag(tagEle[i] , x , y , z);
                tagEle[i].style.color = "rgb("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+")";
                tags.push(t);
            }
            keyEvent();
        }

        var tag = function(ele , x , y , z){
            this.ele = ele;
            this.x = x;
            this.y = y;
            this.z = z;
        }

        tag.prototype = {
            render:function(){
                var scale = fallLength/(fallLength-this.z);
                var alpha = (this.z+RADIUS)/(2*RADIUS);
                this.ele.style.fontSize = 15 * scale + "px";
                this.ele.style.opacity = alpha+0.5;
                this.ele.style.filter = "alpha(opacity = "+(alpha+0.5)*100+")";
                this.ele.style.zIndex = parseInt(scale*100);
                this.ele.style.left = this.x + CX - this.ele.offsetWidth/2 +"px";
                this.ele.style.top = this.y + CY - this.ele.offsetHeight/2 +"px";
            }
        }

        function move() {
            var cos = Math.cos(angleY);
            var sin = Math.sin(angleY);
            tags.forEach(function(e){
                var x1 = e.x * cos - e.z * sin;
                var z1 = e.z * cos + e.x * sin;
                e.x = x1;
                e.z = z1;
            })

            var cos = Math.cos(angleX);
            var sin = Math.sin(angleX);
            tags.forEach(function(e){
                var y1 = e.y * cos - e.z * sin;
                var z1 = e.z * cos + e.y * sin;
                e.y = y1;
                e.z = z1;
            })
        }

        function keyEvent() {
            paper.addEventListener("mousemove" , function(event){
                var x = event.clientX - EX - CX;
                var y = event.clientY - EY - CY;
                angleY = x*0.0001;
                angleX = y*0.0001;
            });
        }

        init();
        setInterval(function() {
            move();
            tags.forEach(function(e){
                e.render();
            })
        }, speed);
    </script>
</body>
</html>